<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>骨龄评估</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
<!--    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">-->
<!--    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>-->

    <script type="text/javascript" src="js/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="js/moment-timezone-with-data-2012-2022.min.js"></script>
    <script src="js/tempusdominus-bootstrap-4.js"></script>
    <link href="css/tempusdominus-bootstrap-4.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="js/prim/edit.js"></script>
    <style>
        .center-auto{
            .col-md-2,
            .col-md-offset-5
        }
        .loadpagediv{
            width:160px;
            height:56px;
            position: absolute;
            top:80%;
            margin-left:-80px;
            margin-top:-28px;
            left:50%;
            background: url(https://m.baidu.com/static/search/ico_loading.gif) no-repeat;
            z-index:9999;
        }
        .float-bg {
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: .6;
            filter: alpha(opacity=60);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1100;
        }
    </style>
</head>
<body>
<div th:include="head::myhead"></div>
<div class="container">
    <div id="loadpagediv" class="loadpagediv" style="display: none"></div>
    <div id="float-bg" class="float-bg" style="display: none"></div>
    <div class="jumbotron" style="margin-top: 5px">
        <div class="row">
            <select class="custom-select" id="idSelect">
                <option disabled selected>请选择一位已保存在列表中的孩童信息！</option>
                <option th:each="youth : ${youths}" th:value="${youth.getYouthId()}"
                        th:text="${youth.getYouthName()}" data-toggle="tooltip"
                        th:title="'姓名：' + ${youth.getYouthName()} + ' 身份证号:' + ${youth.getYouthCardId()}" data-selector="true"/>
            </select>
        </div>

        <div class="row">
            <div class="custom-file" style="margin-top: 10px">
                <input type="file" class="custom-file-input" id="customFile" onchange="saveFile(this.files[0])" required>
                <label class="custom-file-label" for="customFile" id="fileName">选择DICOM图像文件或是JPG格式文件进行上传...</label>
            </div>
        </div>

        <div class="row">
            <input type="number" class="form-control" placeholder="请输入当前的身高(cm)..." style="margin-top: 10px" id="height" required/>
        </div>

        <div class="row">
            <input type="number" class="form-control" placeholder="请输入当前的体重(kg)..." style="margin-top: 10px" id="weight" required/>
        </div>

        <div class="row">
            <div class="form-group input-material" style="margin-top: 10px;width: 100%;height: 100%;display: inline-table;">
                <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" id="checkDate" placeholder="请输入检测的日期"/>

                    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
            <!--<input type="text" class="form-control" placeholder="请输入检测的日期(YYYY/mm/DD)..." style="margin-top: 10px;margin-bottom: 10px" id="checkDate" required/>-->
        </div>

        <figure class="figure center-block" style="margin: 0px auto;display: table;">
            <img id="dicomImg" src="image/dicom_bg.jpg" class="figure-img img-fluid rounded center-block" height="550" width="550" alt="dicom图像">
            <figcaption id="imgText" class="figure-caption text-center">示例图像.</figcaption>
        </figure>

        <br>
        <button type="button" class="btn btn-success center-auto" style="margin: 0px auto;display: table;" onclick="distinguish()">开始分析</button>
    </div>

    <div class="modal fade" id="loadingModal" backdrop="static" keyboard="false">
        　<div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 40%;margin-left:-100px;margin-top:-10px">
<!--        　　　　<div class="progress progress-striped active" style="margin-bottom: 0;">-->
<!--        　　　　　　<div class="progress-bar" style="width: 100%;"></div>-->
<!--        　　　　</div>-->
            <div>
                <img src="https://m.baidu.com/static/search/ico_loading.gif"/>
            </div>
        　　　<h5 id="loadText" style="color: white">AI识别中...</h5>
        　</div>
    </div>
</div>
<script src="js/prim/upload.js"></script>
<script>
    $(function () {
        $('#datetimepicker1').datetimepicker({
            format: 'L'
        });
    });
</script>
</body>
</html>